<template>
  <common-list>
    <!-- 头部搜素start -->
    <el-form slot="search" :model="query" ref="queryForm" v-show="showSearch" :inline="true"  @submit.native.prevent>
      <el-form-item label="类型名称" prop="dictName">
        <common-input v-model="query.dictName" clearable/>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 头部搜素end -->

    <!--列表 start-->
    <common-table slot="content" v-loading="loading" :data="list" @selection-change="handleSelectionChange">
      <!--<el-table-column type="selection" width="55" align="left" />-->


      <el-table-column label="类型名称" align="left" prop="dictName">
        <template slot-scope="{row}">{{ row.dictName }}</template>
      </el-table-column>

      <el-table-column label="类型编码" align="left" prop="dictId">
        <template slot-scope="{row}">{{ row.dictId }}</template>
      </el-table-column>

      <el-table-column label="备注" align="left" prop="remark">
        <template slot-scope="{row}">{{ row.remark }}</template>
      </el-table-column>

      <el-table-column label="操作" align="left" width="120">
        <template slot-scope="{row}">
          <el-button type="text" @click="view(row.dictId)">详情</el-button>
          <el-button type="text" @click="edit(row)" hasPermi>编辑</el-button>
        </template>
      </el-table-column>
    </common-table>

    <pagination slot="pagination" v-show="total>0" :total="total" :page.sync="query.pageNum" :limit.sync="query.pageSize"
                @pagination="getList"/>
    <!-- 列表 end -->
    <editDialog ref="editDialog" @refresh="getList"/>
    <typeDetail ref="typeDetail"/>
  </common-list>
</template>

<script>
  import { dict_type_list } from '@/api/management/configure/index.js'
  import editDialog from './components/typeDialog'
  import typeDetail from './components/typeDetail'

  export default {
    components: { editDialog, typeDetail },
    props: {},
    data() {
      return {
        showSearch: true, // 查询部分显示
        total: 1, // 总条数
        loading: false, // table 加载中
        list: [], // 数据列
        selectionIds: [], // 列表选中数据id
        single: true, // 非单个禁用
        multiple: true, // 非多个禁用
        query: {
          pageNum: 1,
          pageSize: 10
        } // 查询条件
      }
    },
    watch: {},
    computed: {},
    methods: {
      /**
       * 选择
       */
      handleSelectionChange(selection) {
        this.selectionIds = selection.map((item) => item.id)
        this.single = selection.length != 1
        this.multiple = !selection.length
      },
      /**
       * 获取列表
       */
      getList() {
        let query = { ...this.query }
        this.loading = true
        dict_type_list(query).then((res) => {
          this.list = res.rows
          this.total = res.total
          this.loading = false
        })
      },
      /**
       * 查询
       */
      handleQuery() {
        this.query.pageNum = 1
        this.getList()
      },
      /**
       * 重置查询
       */
      resetQuery() {
        this.query = this.$options.data().query
      },
      /**
       * 添加/编辑
       */
      edit(row) {
        this.$refs.editDialog.show(row ? { ...row } : {})
      },
      /**
       * 查看详情
       */
      view(dictId) {
        this.$refs.typeDetail.show(dictId)
      }
    },
    created() {
      this.getList()
    },
    mounted() {
    }
  }
</script>
<style lang="scss" scoped>
</style>
